/*
 * @Title: 娱乐日期选择
 * @Created by: ycq
 */
<template>
	<view class="date-body">
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="date-area">
			<text class="title"> 选择日期和人数</text>
			<view class="now-date">
				<text class="now-date-label">当前选定日期</text>
				<text class="now-start-date">{{startDate.str}}</text>
			</view>
			<!-- <calendar @change="change"></calendar> -->
			<view class="calendar">
				<view class="month-area">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view v-if="nowMonth != ortherMonth" style="width: 80upx;height: 80upx;padding-top: 20upx;padding-left: 40upx;" @click="monthAJ(0)">
						<uni-icon type="arrowleft"  style='margin-top: 12upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view  v-if="nowMonth == ortherMonth"  style="width: 80upx;height: 80upx;padding-top: 20upx;padding-left: 40upx;" >
						<uni-icon type="arrowleft" style='margin-top: 12upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif	 -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view v-if="nowMonth != ortherMonth" style="width: 80upx;height: 50upx;padding-top: 10upx" @click="monthAJ(0)">
						<uni-icon type="arrowleft"  style='margin-left: 30upx;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view  v-if="nowMonth == ortherMonth"  style="width: 80upx;height: 50upx;padding-top: 10upx" >
						<uni-icon type="arrowleft" style='margin-left: 30upx;margin-top: 10upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif -->
					<text class="month-text">{{thisYear}}年{{month[nowMonth-1].month}}</text>
					
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view v-if="addNum<5" style="width: 80upx;height: 80upx;padding-top: 20upx" @click="monthAJ(1)">
						<uni-icon type="arrowright" style='margin-top: 40upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view v-if="addNum>=5" style="width: 80upx;height: 80upx;padding-top: 20upx">
						<uni-icon type="arrowright" style='margin-top: 40upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif	 -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view v-if="addNum<5" style="width: 80upx;height: 50upx;padding-top: 10upx" @click="monthAJ(1)">
						<uni-icon type="arrowright" style='margin-right: 30upx;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
					</view>
					<view v-if="addNum>=5" style="width: 80upx;height: 50upx;padding-top: 10upx">
						<uni-icon type="arrowright" style='margin-right: 30upx;margin-top: 10upx;' size="20" color="rgb(228,228,228)"></uni-icon>
					</view>
					<!-- #endif -->
					
				</view>
				
				<view class="week">
					<view class="week-day"  v-for="(item,index) in weekData" :key='index'>
						<text>{{item.day}}</text>
					</view>
				</view>
				<view class="month">
					<view class="month-day" 
						:class="{'month-day-in':(firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum)|| (endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum),}" 
						v-for="(item,index) in (monthDaysNum[1]+monFirstDay)" 
						:key='index'
						v-on:click='chooseDay(index,addNum,thisYear)'
						>
					
						<view v-if="(firstDay.day == index&&firstDay.year == thisYear&&firstDay.mon == addNum)||(endDay.day == index&&endDay.year == thisYear&&endDay.mon == addNum)" class="day-bg"></view>
						<view class="days-text" >
							<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
							<text v-if="index+1<=monFirstDay" :style="{color:((nowMonth+addNum) == nowMonth&&(index+1)<(thisDay+monFirstDay)?'#999999':'')}"></text>
							<text v-if="index+1>monFirstDay" :style="{color:((nowMonth+addNum) == nowMonth&&(index+1)<(thisDay+monFirstDay)?'#999999':'')}">{{index-monFirstDay+1}}</text>
							<!-- #endif	 -->
							<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
							<text :style="{color:((nowMonth+addNum) == nowMonth&&index<(thisDay+monFirstDay)?'#999999':'')}">{{todayNum(index+1)}}</text>							
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-title">
			<text class='shu'></text>
			<text>选择时间</text>
		</view>
		<view class="order-bottom">
			<text>{{startDate.str}}{{itemIndex==null?'':timeData[itemIndex].time}}</text>
			<view class="btn" @click="pay">确定</view>
		</view>
		<view class="time-list">
			<view v-for="(item,index) in timeData" :class="itemIndex==index?'time-item-ac':'time-item'" :key='index' @click="itemIndex=index">
				{{item.time}}
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						maxHead:true,
						pageId:'binguan',
					},
					left:{
						showPos:false,
						img:'/static/pos-home.png' , //左侧图标
						text:'沈阳市', //左侧文字
					},
					mid:{
						title:'日期选择' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
				nowMonth:'',
				firstDay:{
					day:null,
					mon:null,
					year:null,
					
					},
				startDate:{
					day:null,
					mon:null,
					year:null,
					str:'未选择',
					},
				endDay:{
					day:null,
					mon:null,
					year:null,
					
					},
				itemIndex:null,
				timeData:[
					{time:'11:00'},
					{time:'12:00'},
					{time:'13:00'},
					{time:'14:00'},
					{time:'15:00'},
					{time:'16:00'},
					{time:'17:00'},
					{time:'18:00'},
					{time:'19:00'},
					{time:'20:00'},
					{time:'21:00'},
					{time:'22:00'},
				],
				monthDaysNum:[0,0,0,0],
				month:[{month:'一月'},{month:'二月'},{month:'三月'},{month:'四月'},{month:'五月'},{month:'六月'},{month:'七月'},{month:'八月'},{month:'九月'},{month:'十月'},{month:'十一月'},{month:'十二月'}],
				nextMonth:'',
				lastMonDays:null,
				thisYear:null,
				thisDay:0,
				addNum:0,
				weekData:[{day:'日'},{day:'一'},{day:'二'},{day:'三'},{day:'四'},{day:'五'},{day:'六'}],
				data:{},
			}
		},
		methods: {
			chooseDay(index,addNum,year){
			
				if(!this.checkDay(index)){
					return
				}
				
					this.firstDay.day = index
					this.firstDay.mon = addNum
					this.firstDay.year = year
					this.sDate(year,addNum,index)
				
			
			},
			checkDay(index){
				if(this.nowMonth+this.addNum == this.nowMonth){
					if((index<(this.thisDay+this.monFirstDay))||index<this.monFirstDay+1){
						return false
					}else{
						return true
					}
				}else{
					if(index<this.monFirstDay+1){
						return false
					}
					return true
				}
			},
			monthAJ(type){
				if(type == 0){
					if(this.nowMonth-1>0){
						this.nowMonth-- 
					}else if(this.nowMonth-1 == 0 ){
						this.nowMonth = 12
						this.thisYear--
					}
					if(this.addNum>0){
						this.addNum--
					}
				}else if(type == 1){
					if(this.nowMonth-1<11){
						
						this.nowMonth++ 
					}else if(this.nowMonth-1 == 11 ){
						this.nowMonth = 1
						this.thisYear++
					}
					this.addNum++
				}
				this.jisuan()
			},
			jisuan(){
				var nowDate = new Date();
				var date = {
				    year: nowDate.getFullYear(),
				    month: nowDate.getMonth() + 1,
				    date: nowDate.getDate(),
				    }
				var _thisMon = date.month+this.addNum
				if(_thisMon>12){
					_thisMon = _thisMon-12
					var myDate = new Date(Date.parse((date.year+1)+'/'+_thisMon+'/1'));  
					this.monthDaysNum[1] = this.monthDayNum(_thisMon,date.year+1)
				}else{
					var myDate = new Date(Date.parse(date.year+'/'+_thisMon+'/1'));  
					this.monthDaysNum[1] = this.monthDayNum(_thisMon,date.year)
				}
				
				this.monFirstDay = myDate.getDay()
			},
			sDate(year,mon,day){
				if(year!=null&&mon!=null&&day!=null){
					
					// #ifdef APP-PLUS|| MP-WEIXIN
						this.startDate.day = day-this.monFirstDay+1
					// #endif
					// #ifndef APP-PLUS|| MP-WEIXIN
						this.startDate.day = day-this.monFirstDay+1
					// #endif
					
					if(this.nowMonth>12){
						
						this.startDate.mon = this.nowMonth%12
						this.startDate.year = year+1
					}else{
						this.startDate.mon = this.nowMonth
						this.startDate.year = year
					}
					this.startDate.str = this.startDate.year+'年'+this.startDate.mon+'月'+this.startDate.day+"日"
				}else{
					this.startDate.day = null
					this.startDate.mon = null
					this.startDate.year = null
					this.startDate.str = '未选择'
				}
				
			},
			isLeapYear(year){
				if (year % 100 == 0 && year % 400 == 0){
					return true;
				}else if (year % 100 != 0 && year % 4==0){
					return true;
				}
				return false;
			},
			todayNum(index){
				if(index<=this.monFirstDay){
					// return 30-(this.monFirstDay-index)
					return null
				}else{
					return index-this.monFirstDay
				}
			},
			monthDayNum(month,year){
				var days=0;
				console.log('1111+'+month)
				if(month=='1'||month==3||month==5||month==7||month==8||month=='10'||month==12){
						console.log('1111')
					days = 31
				}else if(month==4||month==6||month==9||month==11){
					days = 30
				}else if(month == 2){
					if(this.isLeapYear(year)){
						days = 29
					}else{
						days = 28
					}
				}
				return days;
			},
			tranCHD(num){
				switch (num){
					case 1:
						return '一月'
						break;
					case 2:
						return '二月'
						break;
					case 3:
						return '三月'
						break;
					case 4:
						return '四月'
						break;
					case 5:
						return '五月'
						break;
					case 6:
						return '六月'
						break;
					case 7:
						return '七月'
						break;
					case 8:
						return '八月'
						break;
					case 9:
						return '九月'
						break;
					case 10:
						return '十月'
						break;
					case 11:
						return '十一月'
						break;
					case 12:
						return '十二月'
						break;
					default:
						break;
				}
			}
		},
		created(){
            var nowDate = new Date();
           var date = {
               year: nowDate.getFullYear(),
               month: nowDate.getMonth() + 1,
               date: nowDate.getDate(),
               }
           	this.thisYear = date.year
           	this.nowMonth = date.month
           	this.ortherMonth = date.month
           	this.monthDaysNum[1] = this.monthDayNum(date.month,nowDate.getFullYear())
           	this.nextMonth = this.tranCHD(nowDate.getMonth()+2);
           	var myDate = new Date(Date.parse(date.year+'/'+date.month+'/1'));  
           	this.lastMonDays = 31 - myDate.getDay()
           	this.thisDay = date.date
           	this.monFirstDay = myDate.getDay()
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	.date-body{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 150upx;
	}
	.list-title{
		width: 88%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:700upx;
		margin-bottom: 20upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.date-area{
		width: 668upx;
		height: auto;
		
		padding-bottom: 20upx;
		background: #FFFFFF;
		position: absolute;
		top: 187upx;
		left:41upx;
		border-radius: 20upx;
		box-shadow: 0px 0px 15px 0px rgba(237,237,237,1);
	}
	.title{
		position: absolute;
		top:-60upx;
		font-size: 30upx;
		margin-left: 24upx;
		color: #FFFFFF;
	}
	
	.now-date{
		width: 100%;
		height: 60upx;
		margin-top: 20upx;
		border-bottom: #F6F6F6 solid 1upx;
		padding-bottom: 20upx;
		line-height: 60upx;
	}
	.now-date-label{
		font-size:30upx;
		float: left;
		margin-left: 30upx;
	}
	.now-start-date{
		font-size:30upx;
		color:#577AFF;
		float: right;
		margin-right: 40upx;
	}
	.month-area{
		width: 100%;
		display: flex;
		height: 80upx;
		flex-direction: row;
		justify-content: space-between;
	}
	.calendar{
		width: 100%;
		margin-top: 60upx;
		height: auto;
		background: #FFFFFF;
		border-radius: 0 0 30upx 30upx;
	}
	.month-text{
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
		font-weight: bold;
	}
	.price-text{
		line-height: 30upx;
		text-align: center;
		font-size: 24upx;
		color: rgba(226,118,21,1.00);
	}
	.week{
		width: 630upx;
		height: 60upx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		margin-top: 40upx;
		justify-content:  flex-start;
	}
	.week-day{
		width: 90upx;
		margin: 10upx 0upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
	}
	
	.month{
		width: 630upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		margin-top: 40upx;
		flex-wrap:wrap;
		justify-content: flex-start;
		
	}
	.month-day{
		width: 90upx;
		margin: 10upx 0upx;
		height: 60upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
	}
	.month-day  text{
		line-height: 60upx;
	}
	.day-bg{
		width: 92upx;
		margin-top: -2upx;
		margin-left: -2upx;
		height: 62upx;
		border-radius: 10upx;
		position: absolute;
		background: rgba(84,176,255,1.00);
	}
	.days-text{
		width: 90upx;
		margin-top: -2upx;
		height: 60upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		position: absolute;
	}
	.month-day-in{
		width: 88upx;
		
		margin: 10upx 0upx;
		/* display: block; */
		height: 58upx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 10upx 0 0 10upx;
	}
	.month-day-in  text{
		font-size: 28upx;
		line-height: 58upx;
	}
	.month-day-btw{
		width: 88upx;
		border: rgba(87,122,255,1.00) inset 1upx;
		border-left: none;
		border-right: none;
		margin: 10upx 0upx;
		height: 58upx;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		color: rgba(254,152,10,1.00)
	}
	.start-border{
		border-radius: 10upx 0 0 10upx;
		border-right: none;
	}
	.end-border{
		border-radius: 0 10upx 10upx 0;
		border-left: none;
	}
	.start-end{
		width: 677upx;
		height: 60upx;
	}
	.start-end-text{
		font-size: 28upx;
		color: #333333;
		margin-left: 50upx;
		float: left;
	}
	.less{
		font-size: 28upx;
		float: right;
		color: #FF8A00;
		margin-right: 50upx;
	}
	
	.order-info{
		width: 677upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
		padding-top: 37upx;
		margin-bottom: 140upx;
		/* background: #0075EE; */
	}
	.order-info-line{
		width: 614upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 28upx;
		height: 50upx;
		padding-top: 2upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 26upx;
	}
	.nop{
		margin-top: 80upx;
		height: auto;
		display: block;
	}
	.nop .order-label{
		font-size: 32upx;
	}
	.nop-list{
		width: 614upx;
		height: auto;
	}
	.nop-item{
		width: 614upx;
		height: 60upx;
		margin-top: 20upx;
	}
	.ptype{
		font-size: 30upx;
		float: left;
		color: #333333;
		margin-left: 40upx;
		line-height: 60upx;
	}
	.ptip{
		font-size: 24upx !important;
		margin-left: 20upx;
		color: #999999;
	}
	.jj{
		width: 126upx;
		height: 26upx;
		margin-top: 16upx;
		float: right;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.jj image{
		width: 26upx;
		height: 26upx;
	}
	.jj text{
		font-size: 30upx;
		line-height: 20upx;
	}
	
	.order-bottom{
			width: 750upx;
			height: 114upx;
			border-top: rgba(0,0,0,0.1) solid 1upx;
			position: fixed;
			z-index: 23;
			bottom: 0;
			background: #FFFFFF;
			
		}
	.order-bottom text{
		line-height: 114upx;
		font-size: 26upx;
		color: rgba(74,154,253,1.00);
		margin-left: 37upx;
		float: left;
	}
	.order-bottom .btn{
			float: right;
			width: 260upx;
			height: 76upx;
			border-radius: 30upx;
			border: none;
			text-align: center;
			line-height: 76upx;
			color: #FFFFFF;
			margin-top: 20upx;
			margin-right: 50upx;
			font-size: 30upx;
			background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, #54B0FF,#577AFF);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, #54B0FF,#577AFF);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(to right, #54B0FF,#577AFF);
			/* 标准的语法 */
		}
		.order-bottom .btn2{
			float: right;
			width: 200upx;
			height: 82upx;
			border: none;
			vertical-align: middle;
			text-align: center;
			padding-top: 16upx;
			line-height: 34upx;
			color: #FFFFFF;
			font-size: 30upx;
			background: -webkit-linear-gradient(left, #a0d3ff,#b1c1ff);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, #a0d3ff,#b1c1ff);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, #a0d3ff,#b1c1ff);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(to right, #a0d3ff,#b1c1ff);
			/* 标准的语法 */
		}
	.sum{
		float: left;
		color: #E25115;
		font-size: 30upx;
		line-height: 98upx;
		margin-left: 40upx;
		height: 98upx;
	}
	.price{
		float: left;
		color: #E25115;
		font-size: 36upx;
		line-height: 98upx;
		height: 98upx;
		margin-right: 23upx;
	}
	.time-list{
		width: 88%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		margin-bottom: 110upx;
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: space-between;
	}
	.time-item{
		width: 214upx;
		height: 70upx;
		line-height: 70upx;
		border: rgba(220,220,220,1.00) solid 1upx;
		border-radius: 10upx;
		font-size: 26upx;
		text-align: center;
		margin-top: 30upx;
		color: rgba(102,102,102,1.00);
	}
	.time-item-ac{
		width: 214upx;
		height: 70upx;
		line-height: 70upx;
		border: rgba(141,202,255,1.00) solid 1upx;
		border-radius: 10upx;
		font-size: 26upx;
		text-align: center;
		background: rgba(141,202,255,1.00);
		color: #FFFFFF;
		margin-top: 30upx;
	}
</style>
